<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
      border: 1px solid #333;
      /* background-color: aquamarine; */
    }
  </style>
</head>

<body>
  <canvas id="myCanvas" width="400" height="300">您当前浏览器不支持</canvas>

  <script>
    const myCanvas = document.getElementById('myCanvas');

    if (myCanvas.getContext) {
      console.log('支持');

      const ctx = myCanvas.getContext('2d'); // 获取渲染上下文对象

      // ctx.fillStyle = '#ff0000';
      // ctx.fillRect(10, 10, 50, 50);

      // ctx.strokeStyle = '#ffff00';
      // ctx.strokeRect(70, 10, 50, 50);

      // ctx.lineWidth = 5;
      // ctx.lineCap = 'round';
      // ctx.lineJoin = 'round';
      // ctx.strokeRect(50, 50, 200, 100);

      // ctx.clearRect(0, 0, 130, 120);
      // setInterval(function () {
      //   draw(ctx);
      // }, 100);

      // 线性渐变
      // let l = ctx.createLinearGradient(0, 0, 0, 300);
      // l.addColorStop(0, 'red');
      // l.addColorStop(0.33, 'yellow');
      // l.addColorStop(0.66, 'green');
      // ctx.fillStyle = l;
      // ctx.fillRect(0, 0, 400, 300);

      // let r = ctx.createRadialGradient(150, 150, 50, 300, 200, 100);
      // r.addColorStop(0, 'red');
      // r.addColorStop(0.33, 'yellow');
      // r.addColorStop(0.66, 'green');
      // ctx.fillStyle = r;
      // ctx.fillRect(0, 0, 400, 300);

      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(50, 50);
      ctx.lineTo(100, 50);
      // ctx.closePath();

      ctx.moveTo(100, 100);
      ctx.lineTo(200, 100);

      ctx.stroke();

      ctx.beginPath();
      ctx.arc(150, 150, 50, 0, Math.PI / 2, false);
      // ctx.closePath();
      ctx.stroke();
      // ctx.fill();

    } else {
      console.log('不支持');
    }

    function draw(ctx) {
      ctx.clearRect(0, 0, 400, 300);

      let w = Math.floor(Math.random() * 40 + 10);
      let h = Math.floor(Math.random() * 30 + 5);
      let x = Math.floor(Math.random() * 350);
      let y = Math.floor(Math.random() * 250);

      ctx.fillRect(x, y, w, h);
    }
  </script>
</body>

</html>